<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧教育平台-课程分类</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v=3.3.6)}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v=4.4.0)}"
          rel="stylesheet">
    <!--BootStrap_Table样式-->
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">

    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v=4.1.0)}" rel="stylesheet">
    <style type="text/css">
        .table > thead > tr > th    {
            color: #2a62bc;
        }
        .form-inline>.btn:not(.query){
            margin-left: 0.8%;
            float: right;
        }
    </style>
</head>

<body class="white-bg">
<div class="row wrapper border-bottom white-bg page-heading animated fadeInRight">
    <div class="col-sm-4" style="margin-top: 25px">
        <form class="form-inline" th:action="#" method="post">
            <div class="form-group">
                <label for="schemeNumberSearch">分类名称:</label>
                <input type="text" class="form-control" style="width: 130px;border-radius: 5px"
                       id="schemeNumberSearch">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">查询</button>
            </div>
        </form>
    </div>
    <div class="col-sm-8 text-right" style="margin-top: 25px">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#add_courseList_modal">添加</button>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <table id="courseCategory_table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<!--添加模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="add_courseList_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="#" id="add_form_model" method="get">
                    <div class="form-group">
                        <label for="courseCategory" class="col-sm-2 control-label">课程分类</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="courseCategory" id="courseCategory"
                                   placeholder="请输入分类名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="categoryDesc" class="col-sm-2 control-label">分类描述</label>
                        <div class="col-sm-10">
                            <textarea rows="5" class="form-control" name="categoryDesc" id="categoryDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add_model">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--添加子表内容的模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="addLowerContent_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="#" id="addLowerContent_form">
                    <div class="form-group">
                        <label for="parentCategoryName" class="col-sm-2 control-label">上级分类:</label>
                        <div class="col-sm-10">
                            <input type="text" readonly class="form-control" id="parentCategoryName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="categoryName" class="col-sm-2 control-label">分类名称:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" required  id="categoryName" placeholder="请输入分类名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类描述:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" required rows="4"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submitLowerContentForm">保存</button>
            </div>
        </div>
    </div>
</div>
<!--修改父表内容的模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="alterContent_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="#" id="alterContent_form">
                    <div class="form-group">
                        <label for="categoryName" class="col-sm-2 control-label">分类名称:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" required  id="alterCategoryName" placeholder="请输入分类名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类描述:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" required rows="4" id="sortDescText"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submitContentAlter">保存</button>
            </div>
        </div>
    </div>
</div>
<!--修改子表内容的模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="alterLowerContent_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="#" id="alterLowerContent_form">
                    <div class="form-group">
                        <label for="categoryName" class="col-sm-2 control-label">分类名称:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" required  id="alterLowerCategoryName" placeholder="请输入分类名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类描述:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" required rows="4" id="LowerSortDescText"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submitLowerContentAlter">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v=2.1.4)}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v=3.3.6)}"></script>
<!-- Sweet alert -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>

<!-- Bootstrap table -->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script>
    $(function () {
        /*初始化bootstrap-table*/
        $("#courseCategory_table").bootstrapTable({
            pagination: true,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 6,                       //每页的记录行数（*）
            pageList: [6, 10],        //可供选择的每页的行数（*）
            detailView: true,       //父子表
            uniqueId: "id",
            url: "../../static/js/demo/training/courseCategory.json",
            columns: [
                {
                    field: 'typeName',
                    title: '类型名称',
                    align: "center"
                }, {
                    field: 'typeDesc',
                    title: '类型描述',
                    align: "center"
                }, {
                    field: 'operation',
                    align: "center",
                    width: '150px',
                    title: "操作",
                    events: {

                        "click .addCourseCategoryBtn": function (e, value, row, index) {
                            //   alert("确定要更新 id=" + row.id + " 的记录吗？");
                            //回显数据
                                  $("#parentCategoryName").val(row.typeName);
                               //   $("#sortDescText").val(row.typeDesc);
                            //弹出模态框
                                  $("#addLowerContent_modal").modal();

                        },
                        "click .editCourseCategoryBtn": function (e, value, row, index) {
                            //隐藏id
                         //   $("#parentCategoryName").val(row.id);
                            //回显数据
                            $("#alterCategoryName").val(row.typeName);
                            $("#sortDescText").val(row.typeDesc);
                            //弹出模态框
                            $("#alterContent_modal").modal();
                            //弹出模态框

                        },
                        "click .deleteBtn": function (e, value, row, index) {
                            //alert("确定要删除吗？");
                            //采用 sweetalert 组件
                            swal({
                                title: "您确定要删除这条数据吗",
                                text: "删除后将无法恢复，请谨慎操作！",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "删除",
                                cancelButtonText: "取消",
                                closeOnConfirm: false
                            }, function () {
                                // todo
                                console.log("要删除的记录是：" + row.id);
                                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                            });

                        }

                    },
                    formatter: function (value, row, index) {
                        return [
                            "<button type='button' class='addCourseCategoryBtn btn btn-primary btn-xs' title='添加' style='margin-right: 15px;'><i class='fa fa-plus'></i> </button>",
                            "<button type='button' class='editCourseCategoryBtn btn btn-primary btn-xs' title='修改' style='margin-right: 15px;'><i class='fa fa-edit'></i> </button>",
                            "<button type='button' class='deleteBtn btn btn-danger btn-xs' title='删除'><i class='fa fa-trash'></i> </button>"
                        ].join("");
                    }
                }],
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                initSubTable(index, row, $detail);
            },
        });
        //初始化子表格(无线循环)
        let initSubTable = function (index, row, $detail) {
            let parentId = row.id;
            let cur_table = $detail.html('<table></table>').find('table');
            $(cur_table).bootstrapTable({
                url: '../../static/js/demo/training/courseCategory_zi.json',
                //   method: 'get',
                queryParams: {id: parentId},
                ajaxOptions: {id: parentId},
                uniqueId: "id",
                striped: true, //是否显示行间隔色
                pagination: true,//显示分页
                sidePagination: "client",   //分页不请求后台
                pageNumber: 1,
                pageSize: 15,
                pageList: [10, 25],
                columns: [{
                    field: 'zid',
                    title: '表记录id',
                    visible: false
                }, {
                    field: 'id',
                    title: '序号',
                    width: '10%',
                    align: "center"
                }, {
                    field: 'lowerType',
                    title: '下级类型',
                    align: "center"
                }, {
                    field: 'lowerDesc',
                    title: '保存目录',
                    align: "center"
                }, {
                    field: 'operation',
                    align: 'center',
                    width: '20%',
                    title: '操作',
                    events: {
                        "click .editLowerTableBtn": function (e, value, row, index) {
                            //隐藏id
                            //   $("#parentCategoryName").val(row.id);
                            //回显数据
                            $("#alterLowerCategoryName").val(row.lowerType);
                            $("#LowerSortDescText").val(row.lowerDesc);
                            //弹出模态框
                            $("#alterLowerContent_modal").modal();
                            //弹出模态框

                        },
                        "click .deleteLowerTableBtn": function (e, value, row, index) {
                            //alert("确定要删除吗？");
                            //采用 sweetalert 组件
                            swal({
                                title: "您确定要删除这条数据吗",
                                text: "删除后将无法恢复，请谨慎操作！",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "删除",
                                cancelButtonText: "取消",
                                closeOnConfirm: false
                            }, function () {
                                // todo
                                console.log("要删除的记录是：" + row.id);
                                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                            });

                        }
                    },
                    formatter: function (value, row, index) {
                        return [
                            "<button type='button' class='editLowerTableBtn btn btn-primary btn-xs' title='修改' style='margin-right: 15px;'><i class='fa fa-edit'></i> </button>",
                            "<button type='button' class='deleteLowerTableBtn btn btn-danger btn-xs' title='删除'><i class='fa fa-trash'></i> </button>"
                        ].join("");
                    }
                }],
                //无线循环取子表，直到子表里面没有记录
                onExpandRow: function (index, row, $Subdetail) {
                    initSubTable(index, row, $Subdetail);
                }
            });
        }
    })

</script>
<script>
    $(function () {
        /*添加父表内容模态框*/
        $('#add_model').click(function () {
            //获取add_form_model表单并提交
            $('#add_form_model').submit();
            window.location.reload();
        });
        /*添加子表内容模态框*/
        $("#submitLowerContentForm").click(function () {
            $("#addLowerContent_form").submit();
        });
        /*修改父表内容模态框*/
        $("#submitContentAlter").click(function () {
            $("#alterContent_form").submit();
            alert("数据已提交");
        });
        $("#submitLowerContentAlter").click(function () {
            $("#alterLowerContent_form").submit();
            alert("数据已提交");
        })
    })
</script>


</body>

</html>